<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>增加商铺</title>
    <style>
        input[type="file"] {
            display: none;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>

<div id="#app">
    <el-container id="app">

        <el-main>
<!--            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">-->
<!--                <el-form-item label="商家名称" prop="name">-->
<!--                    <el-input v-model="ruleForm.name"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-divider></el-divider>-->
<!--                <el-form-item label="经营类型" prop="region">-->
<!--                    <el-select v-model="ruleForm.region" placeholder="请选择经营类型">-->
<!--                        <el-option label="龙虾烧烤" value="1"></el-option>-->
<!--                        <el-option label="甜点饮品" value="2"></el-option>-->
<!--                        <el-option label="小吃馆" value="3"></el-option>-->
<!--                        <el-option label="日韩料理" value="4"></el-option>-->
<!--                        <el-option label="奶茶果汁" value="5"></el-option>-->
<!--                        <el-option label="炸鸡零食" value="6"></el-option>-->
<!--                        <el-option label="汉堡披萨" value="7"></el-option>-->
<!--                        <el-option label="包子粥铺" value="8"></el-option>-->
<!--                        <el-option label="米粉面馆" value="9"></el-option>-->
<!--                        <el-option label="能量西餐" value="10"></el-option>-->
<!--                        <el-option label="煲仔饭" value="11"></el-option>-->
<!--                        <el-option label="面包蛋糕" value="12"></el-option>-->
<!--                        <el-option label="快食简餐" value="13"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-divider></el-divider>-->
<!--                <el-form-item label="商家详情" prop="detail">-->
<!--                    <el-input size="medium" v-model="ruleForm.detail"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-divider></el-divider>-->
<!--                <el-form-item label="人均消费" prop="spend">-->
<!--                    <el-input v-model="ruleForm.spend"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-divider></el-divider>-->
<!--                <el-form-item label="详细地址" prop="address">-->
<!--                    <el-input v-model="ruleForm.address"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-divider></el-divider>-->

<!--                <el-form-item label="上传图片" ref="uploadElement" prop="imageUrl">-->
<!--                    <el-input v-model="ruleForm.imageUrl" v-if="false"></el-input>-->
<!--                    <el-upload-->
<!--                            class="avatar-uploader"-->
<!--                            ref="upload"-->
<!--                            :show-file-list="false"-->
<!--                            action="/index/upload"-->
<!--                            :before-upload="beforeUpload"-->
<!--                            :on-change="handleChange"-->
<!--                            :auto-upload="false"-->
<!--                            :data="ruleForm">-->
<!--                        <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">-->
<!--                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                    </el-upload>-->
<!--                </el-form-item>-->

<!--                <el-form-item>-->
<!--                    <el-button type="primary" size="mid" @click="submitForm('ruleForm')">立即创建</el-button>-->
<!--                    <el-button size="mid" @click="resetForm('ruleForm')">重置</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
{{storeId}}
        </el-main>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            ruleForm: {
                storeId: [[storeId]],
                name: '',
                region: '',
                detail: '',
                spend: '',
                address: '',
                imageUrl: ''
            },
            rules: {
                name: [
                    {required: true, message: '请输入商家名称', trigger: 'blur'},
                ],
                region: [
                    {required: true, message: '请选择经验类型', trigger: 'blur'},
                ],
                detail: [
                    {required: true, message: '请输入商家详情', trigger: 'blur'},
                ],
                spend: [
                    {required: true, message: '请输入人均消费', trigger: 'blur'},
                ],
                address: [
                    {required: true, message: '请输入详细地址', trigger: 'blur'},
                ],
                imageUrl: [
                    {required: true, message: '请上传图片', trigger: 'blur'},
                ],
            }
        },
        methods: {
            submitForm(formName) {
                let vueObj = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        vueObj.$refs.upload.submit();
                        console.log('submit!');

                        $.post("url",vueObj.ruleForm,function (data) {
                            console.log(data)
                        })


                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.ruleForm.imageUrl = '';
                this.ruleForm.name = '';
                this.ruleForm.region = '';
                this.ruleForm.detail = '';
                this.ruleForm.spend = '';
                this.ruleForm.address = '';
            },
            handleChange(file, fileList) {
                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeUpload(file) {
                return true;
            }
        }
    });
</script>
</body>
</html>
